<template>
	<view class="custom_card">
		<view class="card_box" :class="{is_shadow: isShadow === true || isShadow === 'true',have_footer: footer}">
			<view v-if="header" class="card_header">
				<slot name="card-header"></slot>
			</view>
			<view class="content_box" :class="{only_content: !header && !footer}">
				<slot />
			</view>
			<view v-if="footer" class="card_footer">
				<slot name="card-footer"></slot>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * @Author: NXJ
	 * @property {String} isShadow 阴影是否显示
	 * @property {String} header 标题是否显示
	 * @property {String} footer 底部提示是否显示
	 */
	export default {
		name: 'CustomTabs',
		props: {
			isShadow: {
				type: [Boolean,String],
				default: true
			},
			header: {
				type: Boolean,
				default: false
			},
			footer: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return{
				
			}
		},
		watch: {
		},
		methods: {
		}
	}
</script>

<style lang="scss" scoped>
	* {
		font-family: "PingFang-SC-Heavy, PingFang-SC";
	}
	.custom_card {
		// position: relative;
		.card_box {
			background: #FFFFFF;
			border-radius: 10rpx;
			display: flex;
			flex-direction: column;
			position: relative;
			&.is_shadow{
				box-shadow: 0 16rpx 24rpx 0 rgba(0, 0, 0, 0.05);
			}
			&.have_footer{
				padding-bottom: 100rpx;
			}
			.card_header,
			.card_footer {
				height: 100rpx;
				padding: 0 28rpx;
				line-height: 100rpx;
			}

			.card_header {
				position: relative;
				font-size: $font-size-xlg;
				font-weight: 600;
				color: #3C424F;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.card_footer {
				font-size: 28rpx;
				font-weight: 500;
				// text-align: center;
				// color: #185AFF;
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
			}

			.card_header::before,
			.card_footer::before {
				content: "";
				height: 1px;
				transform: scaleY(.5);
				background: #E6E6E6;
				position: absolute;
				right: 32rpx;
				bottom: 0;
				left: 32rpx;
			}

			.card_footer::before {
				top: 0;
			}

			.content_box {
				padding: 28rpx;
				&.only_content{
					padding: 40rpx;
				}
			}
		}
	}
</style>
